<template>
	<el-dialog v-model="visible" :destroy-on-close="true" :width="800" top="5" title="添加基本标签">
		<el-form ref="ruleFormRef" :rules="rules" :disabled="dialogData.isView" :model="formData" label-width="100px">
			<el-row>
				<el-col :span="12">
					<el-form-item label="标签名称" prop="name" clearable>
						<el-select v-model="formData.name" class="m-2" placeholder="请选择标签名称">
							<el-option v-for="item in Dict.getList('personBaseTag')" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="备注" prop="remark" clearable>
						<el-input type="textarea" :rows="2" v-model="formData!.remark" placeholder="请输入备注信息"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" v-show="!dialogData.isView" @click="handleSubmit">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="UserDialog">
import { ref, reactive } from 'vue';
import { FormInstance, FormRules } from 'element-plus';
import { Dict } from '/@/utils/storage'
import { useModal } from '/@/hooks/useModal';
import rulesObj from './rules';

const formData = reactive<any>({
	personId: '',
	type: 'personBaseTag',
	name: '',
	remark: '',
});

//验证规则
const rules = reactive<FormRules>(rulesObj);

const ruleFormRef = ref<FormInstance>();
const { visible, acceptParams, handleSubmit, dialogData } = useModal(formData, ruleFormRef)

defineExpose({
	acceptParams,
});
</script>
